{% from "@dashboard/components/macros.twig" import dashboardHeading %}

{{ helpAsset(
    sprintf(t('About %s'), t('Categories')),
    t(
        'Categories are used to organize posts.',
        'Categories allow you to organize your posts.'
    )
) }}

{{
dashboardHeading({
    title: Title,
    returnUrl: '/vanilla/settings/categories'
})
}}
{{ form.open({'enctype': 'multipart/form-data'})}}
{{ form.errors()}}
{{ form.hidden('ParentCategoryID')}}
<ul>
    <li class="form-group">
        <div class="label-wrap">
            {{ form.label('Category', 'Name')}}
        </div>
        <div class="input-wrap">
            {{ form.textBox('Name')}}
        </div>
    </li>
    <li class="form-group">
        <div class="label-wrap">
            <strong>{{ t('Category Url:') }}</strong>
        </div>
        <div id="UrlCode" class="input-wrap category-url-code">
            {% apply spaceless %}
            <div class="category-url">
                {{ url('/categories', true) }}{{- '/' -}}
                <span>{{ form.getValue('UrlCode') }}</span>
            </div>
            {{- form.textBox('UrlCode') -}}
            {{- form.getValue('UrlCode') ? '/' : '' -}}
            <a class="Edit btn btn-link" href="#">{{ t('edit') }}</a>&nbsp;<a class="Save btn btn-primary" href="#">{{ t('OK') }}</a>&nbsp;
            {% endapply %}
        </div>
    </li>
    <li class="form-group">
        <div class="label-wrap">
            {{ form.label('Description', 'Description') }}
        </div>
        <div class="input-wrap">
            {{ form.textBox('Description', {'MultiLine': true }) }}
        </div>
    </li>
    <li class="form-group">
        <div class="label-wrap">
            {{ form.label('Css Class', 'CssClass') }}
        </div>
        <div class="input-wrap">
            {{ form.textBox('CssClass', {'MultiLine': false}) }}
        </div>
    </li>
    {{ form.imageUploadReact(
        'Photo',
        t('Icon'),
        t('This image will be used in category lists and widgets when using the "Icon" style option. ')
    ) }}
    {{ form.imageUploadReact(
        "BannerImage",
        t('Banner Image'),
        t('This image will appear in this category\'s banner and in category widgets when using the "Image" and/or "Background" style options. Recommended dimensions are about 1000px by 400px or a similar ratio.')
    ) }}

    <li class="form-group">
        <div class="label-wrap">
            {{ form.label('Display As', 'DisplayAs') }}
        </div>
        <div class="input-wrap">
            {{ form.dropDown('DisplayAs', DisplayAsOptions, {'Wrap': true}) }}
        </div>
    </li>
    {% if featureEnabled(constant("Vanilla\\Forum\\Models\\PostTypeModel::FEATURE_POST_TYPES_AND_POST_FIELDS")) %}
        {{ form.react("allowedPostTypeIDs", "CategoryPostTypes", postTypeProps) }}
    {% endif %}
    {% if _ExtendedFields is defined %}
        {{ form.simple(_ExtendedFields, []) }}
    {% endif %}
    <li class="form-group">
        {{ form.toggle('HideAllDiscussions', 'Hide posts from Recent Posts Page and Widgets.') }}
    </li>
    {% if Operation is same as('Edit') %}
        <li class="form-group">
            {{ form.toggle('Archived', 'This category is archived.') }}
        </li>
    {% endif %}
    {{ firePluggableEchoEvent(pluggable, 'afterCategorySettings') }}
    {% if PermissionData|length > 0 %}
        <li id="Permissions" class="form-group">
            {{ form.toggle('CustomPermissions', 'This category has custom permissions.') }}
        </li>
    {% endif %}

    <li id="Featured" class="form-group">
        {{ form.toggle('Featured', 'Featured category.') }}
    </li>

</ul>
<div class="CategoryPermissions">
{% if not featureEnabled(constant("Vanilla\\Forum\\Models\\PostTypeModel::FEATURE_POST_TYPES_AND_POST_FIELDS")) %}
    {% if AllowedDiscussionTypes is defined and AllowedDiscussionTypes|length > 1 %}
        <div class="P DiscussionTypes form-group">
            <div class="label-wrap">
                {{ form.label('Post Types') }}
            </div>
            <div class="checkbox-list input-wrap">
                {% for type, row in AllowedDiscussionTypes %}
                    {{ form.checkBox('AllowedDiscussionTypes[]', row.Plural ?: type, {value: type}) }}
                {% endfor %}
            </div>
        </div>
    {% endif %}
{% endif %}


    {% if _PermissionFields is defined %}
    {{ form.simple(_PermissionFields, []) }}
    {% endif %}

    <div class="padded">{{ t('Check all permissions that apply for each role') }}</div>
    {{ form.checkBoxGridGroups(PermissionData, 'Permission') }}
</div>
{{ form.close('Save') }}
